<template>
 <div>
     <van-overlay :show="showTop" @click="show = false" />
      <div class="condition" @click="handleCondition($event)">
      <img src="@/assets/project/filter.png" alt />
    </div>
  <div class="major-event-content" @click.stop>
    <div class="map">
      <GdMap ref="gdProjectMap" :identifier="'gdMapContainer'" @marker-click="markerClick"></GdMap>
    </div>

    <div v-if="projectsList && projectsList.length>0">
      <div class="icon-map" v-if="isMap" @click.stop="MapListChange">
        <img src="@/assets/icon/icon-map.png" alt />
        <span>查看地图</span>
      </div>
      <div class="icon-list" v-if="!isMap" @click.stop="MapListChange">
        <img src="@/assets/icon/icon-list.png" alt />
        <span>查看列表</span>
      </div>
    </div>
    <keyProjectDetail
      v-show="!isMap && (projectsList && projectsList.length>0)"
      :detail="detailData"
      :projectsList="projectsList"
      :activeTab="currentTab"
      @focus-click="focusClick"
      @item-click="itemClick"
    ></keyProjectDetail>
    <ProjectList v-show="isMap && (projectsList && projectsList.length>0)" :activeTab="currentTab" :list="projectsList"></ProjectList>
    <!-- <van-empty v-if="!projectsList.length && !loading" description="暂无项目" /> -->
    <condition
      v-show="showTop"
      ref="childComp"
      :searchText="searchText"
      :activeTab="currentTab"
      :len="projectsList && projectsList.length"
      @close-pop="closePop"
      @search-data="searchData"
    ></condition>
  </div>
   
 </div>
</template>

<script lang="ts" setup>
import GdMap from '@/components/GdMap/gd-map.vue'
import { computed, ref, reactive, toRefs, watch, onActivated, onMounted, nextTick } from 'vue'
import { showImagePreview, showToast, Popup } from 'vant'
import keyProjectDetail from './keyProjectDetail.vue'
import ProjectList from './projectList.vue'
import projectIcon from '@/assets/project/icon-project.png'
import projectCheckIcon from '@/assets/project/icon-project-selected.png'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store'
import condition from './condition.vue'
import ProjectServe from '@/api/keyProject'

defineOptions({
  name: 'keyProjects'
})
const props = defineProps({
  activeTab: {
    type: Number,
    default: 0
  },
  // activeTab: {
  //   type: String,
  //   default: ''
  // },
  inputValue: {
    type: String,
    default: ''
  },
  isInit: {
    type: Boolean,
    default: true
  },
})

// 取出用户信息
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
//默认展示地图
const isMap = ref(false)
const detailData = ref({})
const projectsList = ref([])
const currentTab = ref('')
const show = ref(true)
const showTop = ref(false)
const searchText = ref('') //检索文本
const conditionParams = ref({
  cityCondition: '',
  productId: '',
  projectCondition: '',
  projectName: '',
  propertyCondition: '',
  provinceCondition: '',
  userId: ''
})
const childComp = ref()  //子组件

watch(
  () => [props.activeTab, props.inputValue,props.isInit],
  (newVal, oldVal) => {

    searchText.value = newVal[1] || '';
     
    if (!(typeof newVal[0] !== 'number' && newVal[0])) {
      //  isMap.value = false
      currentTab.value = newVal[0]   
      
    //  searchData(conditionParams.value)  
    }
      if (newVal[1] !== oldVal[1]) { 
      //  conditionParams.value.projectName = newVal[1]
      //监听到关键字，执行根据关键字检索数据
       searchData(conditionParams.value)
    }
    
    
  },
  {immediate: true},
  {deep: true}
)
onActivated(() => {
  // 专区首页进入初始化数据处理
  if (props.isInit) {
    searchText.value = '';
    // clearParams();
  childComp.value.clearData();
  }
})
  onMounted(() => {
    showTop.value = false
    initMap()
    document.addEventListener("click", (e) => {
        // showTop.value = false
    });
  })

//初始化地图
const gdProjectMap = ref<HTMLElement | null>(null)
const initMap = () => {
  gdProjectMap.value.initMap((layers: any) => {
    getKeyProjects({})
  })
}

// 初始化数据
const searchData = params => {  
  if(JSON.stringify(params) !== '{}'){
    conditionParams.value = { ...params }
  }  
  if (currentTab.value == 0) {
    getKeyProjects(conditionParams.value)
  } else {
    // 获取开工前、施工阶段、竣工投产数据
    getProjectListByCondition(currentTab.value, conditionParams.value)
  }
}

//关注/取消关注事件
const focusClick = item => {
  detailData.value = item;
  let param = {
    productId: item.projectId,
    projectName: item.projectName
  }
  if (item.focusNot == '1') {
    ProjectServe.cancelFocus(param).then(res => {
      if (res.status == '1') {
        showToast('取消关注成功')
        //点击q取消关注后
        searchData(conditionParams.value)
      }
    })
  } else {
    ProjectServe.focus(param).then(res => {
      if (res.status == '1') {
        //点击关注后，按钮切换为已关注
        showToast('关注成功')
        searchData(conditionParams.value)
      }
    })
  }
}

//获取关注重点项目清单
const getKeyProjects = params => {
  let data = { ...params }
  data.projectName = searchText.value
  ProjectServe.getUserFocusProjectList(data).then(res => {
    projectsList.value = res.data
    detailData.value = res.data && res.data.length > 0 ? res.data[0] : {}
    addPoints(projectsList)
  })
}
//获取开工前、施工阶段、竣工投产数据
const getProjectListByCondition = (type, params) => {
  let param = {
    cityCondition: '',
    productId: '',
    projectCondition:type?type:'',
   // projectCondition: type == '开工前' ? '1' : type == '施工阶段' ? '2' : type == '竣工投产' ? '3' : '',
    projectName: searchText.value,
    propertyCondition: '',
    provinceCondition: '',
    userId: ''
  }
  if (JSON.stringify(params) !== '{}') {
    param = { ...params }
    param.projectName = searchText.value
  }

  ProjectServe.getProjectListByCondition(param).then(res => {
    projectsList.value = []
    projectsList.value = res.data
    detailData.value = res.data && res.data.length > 0 ? res.data[0] : {} //删除底部轮播后需添加该代码
    addPoints(projectsList)
  })
}
const handleCondition = event => {
  event.stopPropagation()
  showTop.value = true
}
const closePop = () => {
  showTop.value = false
}
//地图打点
const addPoints = (list: Array) => {
  // gdProjectMap.value.clearMap()
  if (gdProjectMap.value) {
    gdProjectMap.value.clearMap()
  }
  if (list && list.value.length > 0) {
    let markers =
      list &&
      list.value.filter(item => {
        return item.longitude && item.latitude
      })

    markers.forEach(element => {
      element.lon = element.longitude || ''
      element.lat = element.latitude || ''
      element.icon = projectIcon
      element.name = element.projectName || ''
      element.checkIcon = projectCheckIcon
      element.id = element.projectId
    })
    //  markers = [...list.value];
    gdProjectMap.value.addMarkers(markers) //地图打点
    gdProjectMap.value.setCenter([markers[0].lon, markers[0].lat], 10)
     addCuurentMarket(markers[0])
  }
}

//自定义打点，当前选中的点
const addCuurentMarket = (point: object) => {
  var markerContent =
    '' +
    '<div class="custom-content-marker">' +
    '   <img src="' +
    projectCheckIcon +
    '">' +
    '</div>'

  let markers = {
    position: [point.longitude, point.latitude],
    icon: projectCheckIcon,
    content: markerContent,
    offset: new AMap.Pixel(-20, -27)
  }
  gdProjectMap.value.setMarkerHtml(markers)
}

const markerClick = e => {
  if (e.target._originOpts.properties.id) {
    let point = e.target._originOpts.properties
    //项目详情赋值
    detailData.value = point
    addCuurentMarket(point)
  }
}
// 底部轮播滑动反选地图点
const itemClick = item => {
    let point = {...item}
    //项目详情赋值
    detailData.value = point
    addCuurentMarket(point)
 
}
const clearParams = () => {
   conditionParams.value = {
  cityCondition: '',
  productId: '',
  projectCondition: '',
  projectName: '',
  propertyCondition: '',
  provinceCondition: '',
  userId: ''
}
 searchText.value = '';
}
//地图和列表切换
const MapListChange = () => {
  isMap.value = !isMap.value
}

//暴露属性和方法
defineExpose({
  isMap,
  showTop,
  // conditionParams,
  searchData,
  clearParams,
  getKeyProjects
});
</script>

<script lang="ts">
</script>

<style lang="less" scoped>
.major-event-content {
  position: relative;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    //  overflow: hidden;
  .map {
    width: 375px;
    height: calc(100vh - 90px);
    :deep(.amap-icon) {
      width: 29.5px !important;
      height: 33px !important;
      img {
        width: 100% !important;
        height: 100% !important;
      }
    }
    :deep(.custom-content-marker) {
      width: 44.5px !important;
      height: 50px !important;
      img {
        width: 100% !important;
        height: 100% !important;
      }
    }
  }
  .date-wrap {
    position: absolute;
    top: 10px;
    left: 10px;
    > span {
      display: inline-block;
      background: #fff;
      color: #4a4950;
      font-size: 13px;
      height: 28px;
      line-height: 28px;
      padding: 0 10px;
      border-radius: 14px;
      box-shadow: 0px 4px 10px 0px #3a75c519;
      margin-right: 6px;
      &.active {
        background: #3a75c5;
        color: #fff;
      }
    }
  }
  .icon-list {
    position: fixed;
    bottom: 31vh;
    right: 10px;
    background: #fff;
    color: #000000;
    font-size: 11px;
    border-radius: 7px;
    box-shadow: 0px 5px 10px 0px #00000014;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 97px;
    height: 36px;
    img {
      width: 18px;
      height: 18px;
      margin-right: 5px;
    }
  }
  .icon-map {
    // position: fixed;
    // top: 108px;
    position: fixed;
    top: 105px;
    right: 10px;
    background: #fff;
    color: #000000;
    font-size: 11px;
    border-radius: 7px;
    box-shadow: 0px 5px 10px 0px #00000014;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 97px;
    height: 36px;
    img {
      width: 18px;
      height: 18px;
      margin-right: 5px;
    }
  }
}
  .condition {
    width: 10%;
    right: 0;
    height: 44px;
    line-height: 44px;
    position: absolute;
    // right: 16px;
    top: 48px;
    background-color: #ffffff;
    z-index:2;    
    img {
      margin-top:12px;
      width: 18px;
      height: 18px;
    }
  }
</style>

